
$.ajax({
    url: "http://chst.vip:1234/api/getbaicaijiatitle",
})
    .then(res => {
        let lis = ""
        res.result.forEach(item => {
            lis += `<li titleId="${item.titleId}">${item.title}</li>`
        });
        $("#nav>.marsk>.navList")[0].innerHTML = lis
        touch()
        return res
    })

    .then(res => {
        for (let i = 0; i < res.result.length; i++) {
            $(`.navList>li:eq(${i})`).click(function () {
                $(this).css({ color: "red" }).siblings().css({ color: "black" })
                render(i)
            })

        }

    })

function render(id = 0) {
    $.ajax({
        url: `http://chst.vip:1234/api/getbaicaijiaproduct?titleid=${id}`,
    })
        .then(res => {
            let lis = ""
            res.result.forEach(item => {
                lis += `<div>
            ${item.productImg}
            <div class="data">
                <h4>${item.productName}</h4>
                <div>${item.productPrice}</div>
                <div class="clear">${item.productCouponRemain}</div>
                <div>${item.productCoupon}</div>
                <div>${item.productHref}</div>
            </div>
        </div>`
            })
            content.innerHTML = lis
        })
}
render()

$("#footer>.dengruSpan>.backTop").click(function () {
    $("html").animate({ scrollTop: 0 }, 1000)
})

function touch() {
    //获取ul
    var ul = document.querySelector('.navList');
    //获取遮罩
    var marsk = document.querySelector('.marsk');
    //定义三个属性 starx movx distancex totalx等
    var startX, moveX, distanceX, totalX, maxLeft, maxRight;
    //获取li
    var lis = document.querySelectorAll('.navList>li');
    //设置ul的长度
    ul.style.width = lis.length * lis[0].offsetWidth + 'px';
    //往右滑动最大距离
    maxLeft = 0;
    //往左滑动最大距离
    maxRight = marsk.offsetWidth - ul.offsetWidth;
    //滑动的时候最大距离
    maxMoveLeft = maxLeft + 50;
    maxMoveright = maxRight - 50;
    //这个变量用来保存上一次滑动的距离 totalX+=distansX
    totalX = 0;
    // console.log(maxRight);
    // console.log(maxMoveLeft);
    // console.log(maxMoveright);
    ul.addEventListener("touchstart", function (e) {
        /*获取当前手指的起始位置*/
        startX = e.targetTouches[0].clientX;
        // console.log(startX);
    });

    ul.addEventListener('touchmove', function (e) {
        moveX = e.targetTouches[0].clientX;
        distanceX = moveX - startX;
        if (totalX + distanceX > maxMoveLeft || totalX + distanceX < maxMoveright) {
            return;
        } else {
            //先清除过度
            ul.style.transition = 'none';
            ul.style.left = distanceX + totalX + 'px';
        }

    });

    ul.addEventListener('touchend', function () {
        //如果往左滑动的距离>0
        if (totalX + distanceX > maxMoveLeft) {
            ul.style.left = 0 + 'px';
            ul.style.transition = '.5s';
            totalX = 0;
            //回弹
        } else if (totalX + distanceX < maxMoveright) {
            totalX = maxRight;
            ul.style.left = maxRight + 'px';
            ul.style.transition = '.5s';
        }
        else {
            totalX += distanceX;
        }
    });
}

